<template>
	<view class="tabbars">
		<template v-for="item in list" :key="item.label">
			<template v-if="item.type == 'studio' ? bankSwitch : true">
				<template v-if="item.type == 'message' ? bankSwitch : true">
					<template v-if="item.type == 'shopping' ? bankSwitch : true">
						<template v-if="item.type == 'school' ? bankSwitch : true">
							<template v-if="item.type == 'studio' ? applicationRecord : true">
								<view class="tabbars-item">
									<view @click="onTabbarTap(item)">
										<uni-badge
											class="uni-badge-left-margin"
											:text="item.label == '消息' ? messagePoint : 0"
											absolute="rightTop"
											:offset="[-2, -2]"
											size="small"
											:customStyle="{ background: '#6363FF' }"
										>
											<image class="image" :src="currentPages == item.label ? item.iconSel : item.icon" mode=""></image>
											<view :class="[currentPages == item.label ? 'sel' : 'no-sel']">{{ item.label }}</view>
										</uni-badge>
									</view>
								</view>
							</template>
						</template>
					</template>
					
				</template>
			</template>
			
		</template>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { useUserStoreToRefs } from '@/store/useUserStore';
import { useImStoreToRefs } from '@/store/useImStore';
import { useStudioStoreToRefs } from '@/store/useStudioStore';
import { messageSubcrib } from '@/hooks/useMessageSubscrib';
import { useConfigStoreToRefs } from '@/store/useConfigStore';
const { bankSwitch } = useConfigStoreToRefs();
const { messagePoint } = useImStoreToRefs();
let { applicationRecord } = useStudioStoreToRefs();
const { userInfo ,shareRefereeId, shareStudioId } = useUserStoreToRefs();
let list = reactive([
	{
		label: '首页',
		url: '/pages/home/index',
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-107.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-108.png`,
		type: 'home'
	},
	{
		label: '在线商城',
		url: '/pages/onlineMall/index',
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-141.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-142.png`,
		type: 'shopping'
	},
	{
		label: '消息',
		url: '/pages/message/index',
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-117.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-118.png`,
		type: 'message'
	},
	{
		label: '商学院',
		url: '/pages/businessSchool/index/index',
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-143.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-144.png`,
		type: 'school'
	},
	{
		label: '我的',
		url: '/pages/user/index',
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-115.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-116.png`,
		type: 'user'
	},
	{
		label: '工作台',
		url: '/pages/user/workbenches',
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-113.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-114.png`,
		type: 'studio'
	}
]);
const props = withDefaults(
	defineProps<{
		currentPages: string;
	}>(),
	{
		currentPages: ''
	}
);
const onTabbarTap = (item) => {
	// if (item.type == 'shopping') {
	// 	uni.showToast({
	// 		icon: 'none',
	// 		title: '敬请期待'
	// 	});
	// 	return;
	// }
	if (item.type == 'home') {
		if(shareStudioId.value){
			uni.reLaunch({
				url: `/pages/home/index?shareStoreId=${shareStudioId.value}`
			});
		}else{
			uni.switchTab({
				url:item.url
			})
		}
		
		return;
	}
	if (!userInfo.value && item.type == 'message') {
		/* || item.label=="我的"*/
		uni.navigateTo({
			url: '/pages/login/index'
		});
		return;
	}
	if (item.type == 'school') {
		uni.navigateTo({
			url: item.url
		});
	} else {
		uni.switchTab({
			url: item.url
		});
	}
	if (userInfo.value) {
		if (item.type == 'user' || item.type == 'home') {
			messageSubcrib('subscrib_01');
		}
		if (item.type == 'message' || item.type == 'studio') {
			messageSubcrib('subscrib_02');
		}
	}
};
onMounted(() => {
	uni.hideTabBar({ fail: () => {} });
});
</script>

<style lang="scss" scoped>
.tabbars {
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	border-top: 1rpx solid #e4e6e6;
	border-bottom: calc(var(--safe-area-bottom) + 12rpx) solid #fff;
	line-height: 1.2;
	z-index: 10;
	.tabbars-item {
		flex: 1;
		text-align: center;
		font-size: 24rpx;

		.image {
			width: 48rpx;
			height: 48rpx;
		}

		.sel {
			color: var(--color-primary);
		}

		.no-sel {
			color: #7c807f;
		}
	}
}
</style>
